<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../../common/jspcommon.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>头像修改 - 果果街</title>
<meta name="keywords"
	content="果果,果果街,果果网,童装, 淘宝网童装,儿童服装,儿童礼物,儿童美食,母婴用品,童装搭配,创意家居,玩具图书,亲子早教 " />
<%@include file="../../common/js.jsp" %>
<%@include file="../../common/css.jsp" %>
<script type="text/javascript" src="/js/jquery.Jcrop.js"></script>
<link type="text/css" rel="stylesheet" href="/css/v4/detail.css"/>
<link type="text/css" rel="stylesheet" href="/css/v4/jquery.Jcrop.css"/>
<!--[if ie 6]><script type="text/javascript" src="/js/v4/iepng.js"></script><![endif]-->
<!--[if ie]><link type="text/css" rel="stylesheet" href="/css/v4/common/IE.css"><![endif]-->

</head>
<body>

<%@include file="../../common/header.jsp"%>
<%@include file="../menu.jsp" %>
<div class="w100p pt20 pb35">
    	<div class="w980 mg clearfix">
        	<div class=" box_s6">
            	<div class="setting_box clearfix">
                    <div class=" home_185">
                    	<div class="setting_slide">
                        	<h3><i class="icon_setting"></i>账号设置</h3>
                            <ul>
                            	<li><a href="/member/personal.htm">基本信息</a></li>
                                <li class="current"><a href="/member/avatar.htm">修改头像</a></li>
                                <li><a href="/member/tosetpwd.htm">修改密码</a></li>
                            </ul>
                        </div>    
                    </div>
                    <div class="home_795">
                    	<div class="setting_det_box">
                            <div class="setting_det">
                            	<table class="up_avater">
                                	<tr>
                                    	<td class="t_col1">当前头像：</td><td><img src="${member.imageServer }${member.avatar}" width="100" height="100" class="avater" /></td>
                                    </tr>
                                    <tr>
                                    	<td class="t_col1">上传新头像：</td><td><a href="javascript:void(0)" class="def_btn_s2" id="upload_avater">上传头像</a><p style="padding:5px 0 0 0;">建议使用正方形的图片，支持JPG、GIF、JPG格式，2MB以内。</p></td>
                                    </tr>
                                </table>
                            </div>
                            
                        </div>
                    </div>
                </div>
            	<div class="shadow"></div>
            </div>
        </div>
    </div>
<!-- upload_img -->
                                <div class="tc_box release_box" id="upload_img" >
                                    <div class="release_title">
                                        <a href="javascript:void(0)" class="tc_close close_btn">关闭</a>
                                        <p>上传头像</p>
                                    </div>
                                    <div class="content">
										<div class=" upload_box">
                                            <form id="avatarUpload" action="/member/avatarup.htm" method="post" enctype="multipart/form-data">
												<div class="type-file-box">
													<input type="file" name="avatarUploadFile" id="avatarUploadFile" onchange="uploadAvatar()"/>
												</div>
											</form>
											<form method="post">
												<input type="hidden" id="x" name="x" value="0"/>
												<input type="hidden" id="y" name="y" value="0"/>
												<input type="hidden" id="w" name="w" value="0"/>
												<input type="hidden" id="h" name="h" value="0"/>
											</form>
                                            <div class="cut_img_box">
                                            	<div class="resource_img" id="resource_div">
                                                	<img id="avatar_image" src="${member.imageServer }${member.avatar}" width="280" />
                                                </div>
                                                <div class="first_img">
                                                	<img width="120" height="120" src="${member.imageServer }${member.avatar}" id="preview"/>
                                                	<input type="text" id="imageServer" value="${member.imageServer }"/>
                                                	<input type="text" id="imageUrl" value="${member.avatar}"/>
                                                </div>
                                            </div>
                                            <div class="load_img_tip pb35">
                                            	<ul>
                                                	<li>
                                                    	<i class="gray_circle"></i>提示
                                                    </li>
                                                    <li>
                                                    	<i class="gray_circle"></i>仅支持JPG、JPEG、PNG格式图片
                                                    </li>
                                                    <li>
                                                    	<i class="gray_circle"></i>照片大小不超过2MB。
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="btn_box">
                                            	<a href="javascript:void(0)" class="def_btn_s2" id="btn_certain">确认</a>
                                                <a href="javascript:void(0)" class="def_btn_s2" id="btn_cancel">取消</a>
                                            </div>
                                        </div>	
                                    </div>
    							</div>
<!-- upload_img -->
<script type="text/javascript">
$(document).ready(function() {
	$("#upload_avater").click(function(){
		$.fn.popDiv({
			tcID:"upload_img",opacity:0.4,isZZ:true,speed:200,noResize:true
		});
		//jcropAvatar(280,280);
	});
	$("#btn_cancel").click(function(){
		$("div.zz_box").hide();
		$("#upload_img").hide();
	});
	$("#btn_certain").click(function(){
		$.post("/member/avatarcut.htm",{
			'srcImg':$("#imageUrl").val(),
			'imageServer':$("#imageServer").val(),
			'x':$('#x').val(),
			'y':$('#y').val(),
			'w':$('#w').val(),
			'h':$('#h').val(),
			'realWidth':$("#avatar_image").width(),
			'realHeight':$("#avatar_image").height()
		},function(data){
			if(data=="success"){
				window.location.reload();
			}
			
		});
	});

});

function uploadAvatar(){
	var filepath=$("#avatarUploadFile").val(); 
	if(filepath!=null && filepath!=""){
		var extStart=filepath.lastIndexOf("."); 
		var ext=filepath.substring(extStart,filepath.length).toUpperCase();
		if(ext!=".PNG"&&ext!=".JPG"&&ext!=".JPEG"){ 
			alert("图片限于png,jpeg,jpg格式"); 
			return ; 
		}
	}
	$("#avatarUpload").ajaxSubmit({
		dataType : 'json',
		cache : false,
		success : function(data) {
			if(data.sizeAllow==true){
				$("#imageServer").val(data.imageServer);
				$("#imageUrl").val(data.imageUrl);
				var url="/"+data.imageUrl+"?tempid="+Math.random();
				$("#resource_div").html('<img id="avatar_image" src="" width="280"/>');
				$('#avatar_image').attr("src",url);
				$('#preview').attr("src",url);
				var orWidth=data.width;
				var h=280*data.height/orWidth;
				jcropAvatar(280,h);
			}else{
				alert("照片大小不能超过2M!");
			}
		},
		error : function(err) {
			alert(err);
		}
	});
	return false;
}


//显示裁剪头像
function jcropAvatar(width,height){
	$('#avatar_image').Jcrop({
	   aspectRatio:1,
	   onChange:function(coords){showCoords(coords,width,height);},
	   onSelect:function(coords){showCoords(coords,width,height);},
	   setSelect:[0,0,120,120],
	   allowSelect:	false
	});
	
}


function showCoords(coords,realWidth,realHeight){
	$('#x').val(coords.x);
	$('#y').val(coords.y);
	$('#w').val(coords.w);
	$('#h').val(coords.h);
	showPreview(coords,realWidth,realHeight);
}

//预览头像
function showPreview(coords,realWidth,realHeight){
	if (parseInt(coords.w) > 0){
		var rx = 120 / coords.w;
		var ry = 120 / coords.h;
		$('#preview').css({
			width: Math.round(rx * realWidth) + 'px',
			height: Math.round(ry * realHeight) + 'px',
			marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			marginTop: '-' + Math.round(ry * coords.y) + 'px'
		});
	}
}
</script>
</body>
</html>